/**
 * Stylize examples created by typ/show-example.typ.
 */

.example {
  display: flex;
  flex-wrap: wrap;
  gap: 1em;

  > * {
    flex: auto;
  }

  > pre {
    overflow-x: auto;
  }

  > .preview {
    border-radius: 8px;
    /* Copied from typst.app/docs `.preview` */
    align-items: center;
    background: #e4e5ea;
    display: flex;
    flex-direction: column;
    gap: 16px;
    justify-content: center;
    padding: 12px 16px;

    > svg.typst-frame {
      /* The visual padding is the sum of CSS padding and SVG inset. See `render-examples` in show-example.typ */
      padding: 0.5em;
      border-radius: 8px;
      /* Copied from typst.app/docs `.preview > *` */
      background: #fff;
      box-shadow: 0 4px 12px rgba(89, 85, 101, 0.2);
      height: auto;
      max-height: 100%;
      max-width: 100%;
      width: auto;
    }
  }
}
.dark .example > .preview {
  background: darkgray;

  > svg.typst-frame {
    background: lightgray;
  }
}

/*
 * Adapt the syntax highlighting palette to the dark theme
 *
 * In typst v0.14, `text.fill` in `raw` turn into inline `style="color: #rrggbb" attributes.
 * We have to use `!important` to override them.
 * https://forum.typst.app/t/how-to-support-syntax-highlighting-for-html-dark-theme-in-v0-14-0-rc-1/6380/2
 */
.dark main code span {
  /**
   * Check all possible colors by executing the following in the browser console:
   *   [...new Set($$("span[style^='color:']").map((e) => e.outerHTML.match(/style="color: (#[0-9a-f]+?)"/)[1]))].sort()
   * Then improve the contrast ratio:
   *   https://webaim.org/resources/contrastchecker/?bcolor=212737
   * (See also https://github.com/typst/typst/blob/v0.14.0-rc.1/crates/typst-library/src/text/raw.rs#L942-L972.)
   */
  &[style="color: #1d6c76"] {
    color: #36bfce !important;
  }
  &[style="color: #198810"] {
    color: #38be13 !important;
  }
  &[style="color: #4b69c6"] {
    color: #92a5dd !important;
  }
  &[style="color: #6b6b6f"] {
    color: #ababab !important;
  }
  &[style="color: #74747c"] {
    color: #c497d8 !important;
  }
  &[style="color: #b60157"] {
    color: #fe90c7 !important;
  }
  &[style="color: #d73a49"] {
    color: #e5858d !important;
  }
}
